<template>
    <div class="chat-nav">
        <a :href="'/o/chat/ChatList'">
            <div class="chat-ChatManage">
                聊天室列表
            </div>
        </a>
        <a :href="'/o/chat/PublishChat'">
            <div class="chat-PublishChat">
                创建聊天室
            </div>
        </a>
        <a :href="'/o/chat/MyChat'">
            <div class="chat-MyChat">
                前往聊天
            </div>
        </a>
    </div>
</template>
  
<script>
export default {
    name: "chatNav",
    data() {
        return {
        };
    },
    methods: {
        promptMessage() {
            this.$message.warning("此页面还没有做好哦!");
        },
    },
};
</script>
  
<style scoped>
.chat-nav {
    position: absolute;
    z-index: 999;
    top: 150px;
    left: 50px;
    cursor: pointer;
    text-align: center;
    width: 34px;
    line-height: 17px;
    font-size: 15px;
}

.chat-ChatManage {
    height: 110px;
    padding-top: 10px;
    border: 3px solid #6348cf;
    background-color: rgb(220, 255, 238);

    &:hover {
        background: rgb(255, 255, 255);
    }
}

.chat-PublishChat {
    height: 110px;
    padding-top: 10px;
    border: 3px solid #db463e;
    background-color: rgb(203, 235, 255);

    &:hover {
        background: rgb(255, 255, 255);
    }
}

.chat-MyChat {
    height: 110px;
    padding-top: 10px;
    border: 3px solid #65dbc9;
    background-color: rgb(245, 248, 163);

    &:hover {
        background: rgb(255, 255, 255);
    }
}
</style>